<section class="row">
    <h2 class="four columns mobile-two">Adding a new menu type</h2>
    <div class="four columns mobile-two">
        <p>
            This is a simple checkbox menu example. You have to define two methods to make it work: <strong>activateCurrent</strong> and <strong>getHtml</strong><br/>
            and <strong><em>this</em></strong> variable will be scoped to the current Maplace instance.
        </p>
<pre class="prettyprint">
var html_checks = {
        //required: called by Maplace.js to activate the current voice on menu
        activateCurrent: function(index) {
                this.html_element.find("input[value='" + index + "']").attr('checked', true);
        },
        //required: called by Maplace.js to get the html of the menu
        getHtml: function() {
                var self = this,
                        html = '';

                //if more than one location
                if(this.ln > 1) {
                        html += '&lt;div class="checkbox controls ' + this.o.controls_cssclass + '"&gt;';

                        //check "view all" link
                        //use ShowOnMenu(index) to know if a location has to appear on menu
                        if(this.ShowOnMenu(this.view_all_key)) {
                                html += '&lt;label&gt;&lt;input type="radio" name="gmap" value="'
                                         + this.view_all_key + '"/&gt;' + this.o.view_all_text + '&lt;/label&gt;';
                        }

                        //iterate the locations
                        for (var a = 0; a &lt; this.ln; a++) {
                                if(this.ShowOnMenu(a))
                                    html += '&lt;label&gt;&lt;input type="radio" name="gmap" value="' + (a+1) + '"/&gt;'
                                             + (this.o.locations[a].title || ('#' + (a+1))) + '&lt;/label&gt;';
                        }
                        html += '&lt;/div&gt;';
                }

                this.html_element = $('&lt;div class="wrap_controls"&gt;&lt;/div&gt;').append(html);

                //event on change
                //use ViewOnMap(index) to trigger the marker on map
                this.html_element.find('input[type=radio]').bind('change', function() {
                        self.ViewOnMap(this.value);
                });

                return this.html_element;
        }
};
</pre>
<pre class="prettyprint">
//new Maplace object
var maplace = new Maplace();

//add the new menu with the method AddControl(name, function)
maplace.AddControl('checks', html_checks);

//load the map
maplace.Load({
    controls_type: 'checks',
    locations: [{...}, {...}]
});
</pre>
    </div>
</section>
